<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="../js/vue.js"></script>
    <!-- 值绑定，动态绑定值 -->
    <!-- 官方推荐，在使用v-for指令的时候，可以添加 一个：key属性 唯一标识 提高效率 让Diff算法更容易找到-->
    <div id="app">
        <label v-for="item in hobbies" :key="item">{{item}}</label>
        <!-- vue数组的补充 -->
        <!-- 因为Vue响应式的，所以当data属性里面发生变化时，Vue会自动检测数据变化，试图会发生改变 -->
        <!-- 数组的响应，数组发生改变，视图也发生变化 -->
        <br>
        <button @ckick="btnClick">button</button>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                hobbies:['篮球','排球','羽毛球','足球','乒乓球','唱','跳','Rap'],
            },
            methods:{
                btnClick(){
                    //1.push方法：在数组的末尾添加一个新的元素
                    this.hobbies.push("aaa")

                    //2.pop方法：弹出（删除）最后一个方法
                    this.hobbies.pop();

                    //3.shift方法：删除第一个方法
                    this.hobbies.shift();

                    //4.unshift方法：在数组的头部增加一个新的元素
                    this.hoobies.unshith();

                    //5.splice(start,删除几个元素，追加元素)可以删除元素，插入元素，替换元素
                    this.hobbies.splice(2,2,"aaa");
                    this.hobbies.splice(0,1,"保龄球");

                    //6.sort()方法排序
                    this.hobbies.sort()
                    //7.reverse()方法
                    this.hobbies.reverse()

                    let total = 0
                    function sum(...item){
                        // es6 for of 把数组中值循环出来
                        for(let value of item){
                            total = total+item[i]
                        }
                    }

                     
                }
            }

        })
    </script>

</body>

</html>